import React from 'react';
import {NavLink, Link} from 'react-router-dom';
import {fetchList,idnum} from '../action/new'
import { connect } from 'react-redux';

function objchangestring(obj){
	var arr=[];
	for(var i in obj){
		arr.push(i+'='+obj[i]);
	}
	return arr.join('&');
}
var $ = (function(){
  var ajax=function(url,callback){
       var xhr=new XMLHttpRequest();
       xhr.open("POST",url,true);
       xhr.send("");
       xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
               callback(JSON.parse(xhr.responseText));
         }
       }
  }
  return {
    http:ajax    
   }
})();   
class News extends React.Component{  
              constructor(props) {
                super(props); 
                                    
            }
            target(e){
            var _this=this;
            var a=null;
            var arr=[];
            console.log(e.target)
            console.log(this.props)
             if(e.target.getAttribute('id')!='myTabDrop1'){
              $.http(`http://10.31.160.25:3000/News/info/${e.target.getAttribute('id')}`,function(data){
                      arr.push(data.docs)
                      _this.setState({
                          data: Object.assign({}, _this.state.data, {data:arr}),
                      })   
              });
              this.setState({
                id:Object.assign({},this.state.id,
                {id:e.target.getAttribute('id')}
                )
              })
           };
          }
          shouldComponentUpdate(){
            return true;
          }
          componentWillUpdate(a,b){
          
                // if(e.target.getAttribute('id')!='myTabDrop1'){

                //   this.props.fetchList({page:this.props.page,id:e.target.getAttribute('id')})
                // }
              }
          shouldComponentUpdate(a,b){
            return true;
          }
            componentWillMount(){
             this.props.fetchList({page:this.props.page,id:0});   
            }

         handleSearch(){
              this.state=$('#searchInput').val()
             this.props.fetchList({global:this.state.data.data[0][0].global});
         }
         decreasePage=(e)=>{
             var page=this.props.page-1;
            this.props.fetchList({page:page,id:this.props.id});   
         }
         increasePage=(e)=>{
             var page=parseInt(this.props.page)+1
             this.props.fetchList({page:page,id:this.props.id});
         }

    render(){
      let list = [];
      var list1=[];
      var pagelis=[];
    const newsList =this.props.newsLists.docs.length;
   
    const { newsLists,page}=this.props;
    const { limit,pages,total }=newsLists;
   
    for(var i=0;i<newsList;i++){
      var a=this.props.newsLists.docs[i];
      var link='/Newsdetail/'+a._id;
      list.push(
        <ul><li><NavLink to={link}>{this.props.newsLists.docs[i].global}</NavLink></li></ul>
    )
    }
    for(var i=1;i<=pages;i++){
      this.props.page==i? 
      pagelis.push( <li key={i} className='active'><a href="javascript:void(0)" onClick={this.pageClick}>{i}</a></li> ):
     pagelis.push( <li key={i}><a href="javascript:void(0)" onClick={this.pageClick}>{i}</a></li> )
  }
        return(
          <div>   
             <div className="panel panel-default col-md-12" style={{height:'300px'}}> 
                  <img src='http://wapfile.desktx.com/pc/161220/bigpic/585784024273c.jpg'  style={{width:'1315px',height:'300px'}}/>
             </div>
            <div style={{display:'inline-block'}}  className='col-md-8'>
             <div>              
                <ul id="myTab" className="nav nav-tabs " onClick={this.target.bind(this)}>
                      <li className="active"><a href="#home" data-toggle="tab" id='0' >
                热门新闻</a></li>
                      <li ><a href="#ios" data-toggle="tab" id='1' >国际新闻</a></li>
                      <li className="dropdown" >
                        <a href="#" id="myTabDrop1" className="dropdown-toggle" 
                          data-toggle="dropdown">
                          国内新闻 <b className="caret"></b></a>
                        <ul className="dropdown-menu" role="menu"aria-labelledby="myTabDrop1">
                          <li><a href="#jmeter" tabIndex="-1" data-toggle="tab" id='2.1'>娱乐新闻</a></li>
                          <li><a href="#ejb" tabIndex="-1" data-toggle="tab" id='2.2'>体育新闻</a></li>
                        </ul>
                      </li>
                 </ul>
              </div>
           
                      <div id="myTabContent" className="tab-content" style={{height:'300px'}}>
                          <div className="tab-pane fade in active" id="home" type={1}>{list}</div>
                          <div className="tab-pane fade" id="ios" type={2}>
                          {list}
                          </div>
                          <div className="tab-pane fade" id="jmeter" type={3}>
                          {list}
                          </div>
                          <div className="tab-pane fade" id="ejb" type={4}>
                          {list}                           
                          </div>
                      </div>
                      <div style={{marginLeft:'50px'}}>
                          <ul className="pagination">
                            <li><a href="javascript:void(0)" onClick={this.decreasePage.bind(this)}>上一页</a></li>                            
                            <li><a href="javascript:void(0)">{page}</a></li>                            
                            <li><a href="javascript:void(0)" onClick={this.increasePage.bind(this)}>下一页</a></li>
                          </ul>
                      </div>
             </div>
          <div className='col-md-4'>
                <div className="col-lg-10 col-md-4" >
                  <div className="input-group">
                    <input type="text" class="form-control" id='searchInput'/>
                    <span className="input-group-btn">
                      <button className="btn btn-default" type="button" onClick={this.handleSearch.bind(this)}>
                        搜索
                      </button>
                    </span>
                  </div>
                </div>
                <div className="panel panel-default col-md-4 col-lg-10" style={{marginTop:'10px',height:'200px',overflow:'hidden'}}>                  
                <div className="tab-pane fade in active" id="home">
                {list}               
              </div>
                  </div>
              </div>
        </div>
        )
    } 
};
const mapStateToProps=(state)=>{
    return{
        id:state.news.id,
        newsLists:state.news.newsLists,
        page:state.news.page,
        message:state.news.message,
    }
}
export default  connect(mapStateToProps,{fetchList,idnum})(News);
// import React, { Component } from "react";
// import NewsLi from "./NewsLi.js";
// import {  NavLink } from 'react-router-dom';

// class News extends Component {
//     constructor(props, context) {
//       super(props)
//       this.state = {
//           data: []
//       }
//     }
  

//   getCate(){
//       fetch("/api/news/list",{
//         method: "POST"
//       }).then(res=>{
//           return res.json();
//         }).then((data) => {
//             this.setState({
//               data:data
//             })
//       })
//     }
//     componentDidMount(){
//       debugger;
//       this.getCate();
//   }
    
//   render() {
//     console.log(this.state.data.rows instanceof Array)
//     return (
//       <content className="feed-list-container">
//         <div
//           className="beta-front-page-header hidden-xs"
//           style={{ marginTop: "1%", marginBottom: "1%" }}
//         >
//           <b className="pantry-brown-title pantry-brown-title-pc">热点资讯</b>
//           <NavLink to="/list" className="aaa"> more  </NavLink>
//         </div>
//         <ul>
//           <div id="listul" className="list_content" data-pull-fresh="1">
          
             
//           {this.state.data.rows && this.state.data.rows.map(
//             (item,index)=>{
//               return index<=3 ? <NewsLi data={item} key={index}/> : ""
//             }
//           ) }
            
//           </div>
//         </ul>
//       </content>
//     );
//   }
// }

// export default News;
